<template>
  <div>
    Father
    <br />
    从vuex中获取的值: {{ $store.state.count }}
    <button @click="add">点我+10</button>
    <br />
    延迟:<button @click="syncadd">actions+10</button>
    <br />
    数组:{{ $store.state.list }}==和:{{ $store.getters.sum }}
    <button @click="sum1">求和</button>
    <br />
    setting中的数据:{{ $store.state.setting.speak }}
    <br />
    修改user模块中的age:{{ $store.state.user.userinfo.age }}
    <button @click="addage">age+1</button>
  </div>
</template>
<script>

/*
 1.mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 
 它属于一种方便的用法
 2.mapMutations和mapState很像，它把位于mutations中的方法提取了出来，
 我们可以将它导入
*/

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: '',
  data () {
    return {
      arr: [1, 2, 3, 4]
    }
  },
  created () {
    //modules导入的数据,在this.$store.state.对象名中
    console.log(this.$store)
  },
  computed: {
    /* veux定义的数据在computed中做映射 */
    ...mapState(['count', 'name', 'list']),
    ...mapGetters(['sum']),//mapGetters辅助函数映射getters中的方法
  },
  methods: {
    //mutations同步按钮
    add () {
      // console.log(this.$store);
      /*触发mutations中的函数,必须使用 $store.commit*/
      // this.$store.commit('addheader', this.arr)//方法一
      this.addheader(this.arr)//mapMutations获取的方法
    },
    //actions异步按钮
    syncadd () {
      // console.log(this.$store);
      /*触发actions中的异步函数,必须使用 $store.dispatch*/
      // this.$store.dispatch('syncaddheader')//方法一
      this.syncaddheader(this.arr)//mapActions获取的方法
    },

    //getters计算属性
    sum1 () {
      /* getters中的函数,必须使用this.$store.getters获取*/
      // console.log(this.$store.getters.sum);
      // this.sum()
    },

    addage () {
      //调用私有模块的方法时,前面必须加上:模块名/
      // this.$store.commit('user/changeUserName')
      this.changeUserName()
    },

    /* veux定义的函数在methods中做隐射 */
    ...mapMutations(['addheader']),//mapMutations辅助函数映射mutations中的方法
    ...mapActions(['syncaddheader']),//mapActions辅助函数映射actions中的方法
    ...mapMutations('user', ['changeUserName']),
  }
}
</script>
<style lang='less'  scoped>
</style>
